<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue'
import ClassCard from './ClassCard.vue'
import { getCurrentDayScheduleList } from '@/services/home.ts'
import {
  getDashboardDataAPI,
  getQuarterlyConsumptionRevenueStatisticsAPI,
} from '@/services/organ.ts'
import type { ScheduleItem } from '@/types/schedule'
// 状态管理
const isLoading = ref(false)
const isTriggered = ref(false)
const scheduleList = ref<ScheduleItem[]>([])
const studentCount = ref(128)
const teacherCount = ref(16)
const courseCount = ref(32)
const todayIncome = ref('¥2,560')

const serviceItems = ref([
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/student.png',
    name: '学生管理',
    color: '#409EFF',
    url: '/pages/student/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/teacher.png',
    name: '教师管理',
    color: '#409EFF',
    url: '/pagesOrgan/teacher/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/calendar.png',
    name: '课程管理',
    color: '#FF7D00',
    url: '/pagesOrgan/course/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/calendar.png',
    name: '课表',
    color: '#409EFF',
    url: '/pages/mySchedule/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/finance.png',
    name: '财务管理',
    color: '#909399',
    url: '/pagesOrgan/finance/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/purchaseCourses.png',
    name: '购课信息',
    color: '#56cdc6',
    url: '/pagesOrgan/course/purchaseCourses',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/class.png',
    name: '班级管理',
    color: '#909399',
    url: '/pagesOrgan/class/index',
  },
  {
    icon: 'https://167nj97th156.vicp.fun/profile/upload/notice.png',
    name: '通知管理',
    color: '#83c6c2',
    url: '/pages/notice/index',
  },
  // {
  //   icon: 'https://167nj97th156.vicp.fun/profile/upload/settings.png',
  //   name: '系统设置',
  //   color: '#FF7D00',
  //   url: '/pages/settings/index',
  // },
  // {
  //   icon: 'https://167nj97th156.vicp.fun/profile/upload/help.png',
  //   name: '帮助中心',
  //   color: '#8992c8',
  //   url: '/pages/help/index',
  // },
])
// 日期选择相关
const now = new Date()
const startDate = computed(() => `${now.getFullYear()}-01-01`)
const selectedDate = ref(`${now.getFullYear()}年`)
const statisticsDate = ref(now.getFullYear())
// 图表数据
const chartsDataColumn = ref<number[]>([])
const chartData = ref({
  categories: ['一季度', '二季度', '三季度', '四季度'],
  series: [
    {
      name: '课消收入',
      data: chartsDataColumn,
    },
  ],
})
// 获取今日课程列表
const getCurrentDayScheduleListData = async () => {
  try {
    const res = await getCurrentDayScheduleList()
    scheduleList.value = res.data
  } catch (error) {
    console.error('获取课程列表失败:', error)
  }
}

const getDashboardData = async () => {
  try {
    const res = await getDashboardDataAPI()
    studentCount.value = res.data.studentCount
    teacherCount.value = res.data.teacherCount
    courseCount.value = res.data.courseCount
    todayIncome.value = res.data.todayIncome
  } catch (error) {
    console.error('获取数据概览失败:', error)
  }
}
// 获取图表数据
const getChartData = async () => {
  try {
    const res = await getQuarterlyConsumptionRevenueStatisticsAPI({
      statisticsDate: statisticsDate.value,
    })
    // 假设接口返回的数据结构与我们需要的一致
    chartsDataColumn.value = res.data
  } catch (error) {
    console.error('获取季度消费收入统计失败:', error)
  }
}
// 生命周期
onMounted(async () => {
  console.log('组件加载完成，图表应该开始初始化')
  isLoading.value = true
  await Promise.all([getCurrentDayScheduleListData(), getDashboardData(), getChartData()])
  isLoading.value = false
})

// 下拉刷新处理
const onRefresherrefresh = async () => {
  isTriggered.value = true
  await Promise.all([getCurrentDayScheduleListData(), getDashboardData(), getChartData()])
  isTriggered.value = false
}

// 导航方法
const navigateToSchedule = () => {
  uni.navigateTo({ url: '/pages/mySchedule/index' })
}

// 日期选择变化
const onDateChange = (e: any) => {
  const date = new Date(e.detail.value)
  selectedDate.value = `${date.getFullYear()}年`
  // 这里可以根据选择的日期重新加载图表数据
  statisticsDate.value = date.getFullYear()
  getChartData()
}
</script>
<template>
  <scroll-view
    class="page-container"
    :scroll-y="true"
    :refresher-enabled="true"
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
  >
    <!-- 数据概览区 -->
    <view class="dashboard-container card-common">
      <view class="dashboard-title">运营概览</view>
      <view class="stat-grid">
        <view class="stat-item">
          <text class="stat-value">{{ studentCount }}</text>
          <text class="stat-label">学生总数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ teacherCount }}</text>
          <text class="stat-label">教师总数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ courseCount }}</text>
          <text class="stat-label">课程总数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ todayIncome }}</text>
          <text class="stat-label">今日收入</text>
        </view>
      </view>
    </view>

    <!-- 快速功能入口 -->
    <view class="service-grid card-common">
      <navigator
        class="service-item"
        hover-class="none"
        :url="item.url"
        v-for="(item, index) in serviceItems"
        :key="index"
      >
        <view class="icon-container" :style="{ backgroundColor: item.color + '15' }">
          <image class="icon" :src="item.icon"></image>
        </view>
        <text class="service-name">{{ item.name }}</text>
      </navigator>
    </view>

    <!-- 今日课程 -->
    <view class="section-container card-common">
      <view class="section-header flex-row justify-between items-center">
        <text class="section-title">今日课程</text>
        <text class="more-link" @click="navigateToSchedule">{{ '更多>' }} </text>
      </view>
      <view class="schedule-content">
        <ClassCard v-for="course in scheduleList" :key="course.id" :schedule="course" />
        <view class="empty-state" v-if="scheduleList.length === 0 && !isLoading">
          <image class="empty-icon" src="@/static/images/empty.png"></image>
          <text class="empty-text">暂无课程</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import '../styles/index.scss';
.page-container {
  height: 100vh; // 设置高度为视口高度
  box-sizing: border-box; // 确保内边距不影响总高度
  padding-bottom: 150px; // 防止内容被底部遮挡
}

.dashboard-container {
  padding: 20rpx;
}

.dashboard-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.stat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stat-item {
  width: 48%;
  height: 160rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

// 响应式适配
@media screen and (max-width: 320px) {
  .stat-item {
    width: 100%;
  }
}
</style>
